Resolve "Use more crudlists in core"

Closes #989 (closed)

aleksis/core/frontend/components/generic/forms/ColorField.vue

@@ -14,7 +14,7 @@
         v-bind="$attrs"
         v-on="$listeners"
         placeholder="#AABBCC"
-        :rules="mergedRules"
+        :rules="$rules().isHexColor(allowAlpha).build(rules)"
       >
         <template #prepend-inner>
           <v-icon :color="color" v-bind="attrs" v-on="on"> mdi-circle </v-icon>
@@ -26,9 +26,12 @@
 </template>
 
 <script>
+import formRulesMixin from "../../../mixins/formRulesMixin";
+
 export default {
-  name: "DateField",
+  name: "ColorField",
   extends: "v-text-field",
+  mixins: [formRulesMixin],
   data() {
     return {
       menu: false,
@@ -44,6 +47,11 @@ export default {
       required: false,
       default: () => [],
     },
+    allowAlpha: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     color: {
@@ -54,14 +62,6 @@ export default {
         this.$emit("input", newValue);
       },
     },
-    mergedRules() {
-      return [
-        (value) =>
-          /^(#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8}))?$/i.test(value) ||
-          this.$t("forms.errors.invalid_color"),
-        ...this.rules,
-      ];
-    },
   },
 };
 </script>