✨ show regex and color error

src/components/esf-input-color.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :for="id">
+  <label :for="id" :class="{ invalid: !isValid }">
     <span>{{ label }}</span>
     <div>
       <input v-model="rootValue" type="color" />
@@ -11,6 +11,7 @@
 <script lang="ts" setup>
 import { getId } from '~/logic';
 import { computed } from 'vue';
+import { isColorHexValid } from '~/utils';
 
 const props = defineProps({
   modelValue: {
@@ -39,6 +40,10 @@ const rootValue = computed({
     emits('update:modelValue', newValue.toUpperCase());
   },
 });
+
+const isValid = computed(() => {
+  return isColorHexValid(rootValue.value);
+});
 </script>
 
 <style lang="scss" scoped>
@@ -115,4 +120,14 @@ input[type='text'] {
     border-color: var(--esf-accent);
   }
 }
+
+.invalid {
+  span {
+    color: var(--esf-error);
+  }
+
+  input {
+    border-color: var(--esf-error);
+  }
+}
 </style>

src/components/esf-input-text.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :for="id">
+  <label :for="id" :class="{ invalid: !isValid }">
     <span>{{ label }}</span>
     <input :id="id" v-model="rootValue" :placeholder="placeholder" type="text" />
   </label>
@@ -21,6 +21,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isValid: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emits = defineEmits(['update:modelValue']);
@@ -64,7 +68,17 @@ input {
   }
 
   &:focus {
-    border-color: var(--esf-accent);
+    border-color: var(--esf-accent) !important;
+  }
+}
+
+.invalid {
+  span {
+    color: var(--esf-error);
+  }
+
+  input {
+    border-color: var(--esf-error);
   }
 }
 </style>

src/options/Options.vue

@@ -75,7 +75,12 @@
                   <img :src="icons[rule.id]?.icon" alt="" />
                 </div>
                 <div>{{ lang.rules.type[rule.type] }}</div>
-                <div class="rules-pattern">{{ rule.testPattern }}</div>
+                <div
+                  class="rules-pattern"
+                  :class="{ invalid: !isRegexValid(rule.testPattern) || !isColorHexValid(rule.color) }"
+                >
+                  {{ rule.testPattern }}
+                </div>
                 <div>{{ rule.active ? 'Active' : 'Disable' }}</div>
                 <VDropdown @apply-show="activateFocusTrap(rule.id)" @hide="deactivateFocusTrap">
                   <button class="rules-rowAction rules-actionIcons" @click.stop>
@@ -103,14 +108,19 @@
               </div>
               <div class="ruleItem">
                 <h4 class="sectionLabel">Pattern</h4>
-                <EsfInputText v-model="rule.testPattern" label="Match pattern" placeholder="*.com" />
+                <EsfInputText
+                  v-model="rule.testPattern"
+                  label="Match pattern"
+                  placeholder="*.com"
+                  :is-valid="isRegexValid(rule.testPattern)"
+                />
               </div>
               <div class="ruleItem">
                 <h4 class="sectionLabel">Color</h4>
-                <EsfInputColor v-model="rule.color" label="Color" placeholder="#663399" />
+                <EsfInputColor v-model="rule.color" label="Color code" placeholder="#663399" />
               </div>
               <div class="ruleItem">
-                <h4 class="sectionLabel">Color position</h4>
+                <h4 class="sectionLabel">Overlay type</h4>
                 <EsfRadioGroup v-model="rule.filter" :options="ruleColorPositionOptions"></EsfRadioGroup>
               </div>
             </div>
@@ -148,7 +158,7 @@ import EsfInputColor from '~/components/esf-input-color.vue';
 import useSettings from '~/composables/useSettings';
 import { sendMessage } from 'webext-bridge';
 import { AppDataRule } from '~/types/app';
-import { isDef, isNull, throttle, hashString, getDateAsString } from '~/utils';
+import { isDef, isNull, throttle, hashString, getDateAsString, isRegexValid, isColorHexValid } from '~/utils';
 import EsfInputFile from '~/components/esf-input-file.vue';
 import EsfExtensionPresentation from '~/components/esf-extension-presentation.vue';
 import { exportJSONFile } from '~/logic/import-export';
@@ -387,6 +397,10 @@ function deactivateFocusTrap() {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+
+    &.invalid {
+      color: var(--esf-error);
+    }
   }
 
   &-rowAction {

src/styles/_variables.scss

@@ -13,6 +13,8 @@
   --esf-accent: #8ab4f8;
   --esf-accent-opacity: #8ab4f899;
 
+  --esf-error: #f28b82;
+
   --esf-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px 0, rgba(0, 0, 0, 0.15) 0 2px 6px 2px;
 
   // fonts

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './general';
 export * from './date';
+export * from './validation';

src/utils/validation.ts

@@ -0,0 +1,12 @@
+export function isRegexValid(pattern: string): boolean {
+  try {
+    new RegExp(pattern);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export function isColorHexValid(color: string): boolean {
+  return /^#[0-9A-F]{6}$/i.test(color);
+}