add html-validator + fix html ceo code

components/UiButton/UiButton.params.ts

@@ -1,13 +1,17 @@
 export const colorVariants = {
-  primary: ['bg-accent-50', 'text-primary', 'hover:bg-accent-100', 'active:bg-accent-150'],
-  secondary: [
-    'bg-transparent',
-    'text-primary',
-    'hover:bg-accent-50',
-    'border-accent-50',
-    'border',
-    'hover:bg-accent-100',
-    'active:bg-accent-150',
-    'cursor-pointer',
+  primary: [
+    "bg-accent-50",
+    "text-primary",
+    "hover:bg-accent-100",
+    "active:bg-accent-150",
   ],
-}
+  secondary: [
+    "bg-transparent",
+    "text-primary",
+    "hover:bg-accent-50",
+    "border-accent-50",
+    "border",
+    "hover:bg-accent-100",
+    "active:bg-accent-150",
+  ],
+};

components/UiButton/UiButton.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="tag"
+    :type="tag === 'button' ? 'button' : ''"
     class="px-14 py-4 rounded-[20px] text-[30px] cursor-pointer shadow-[0px_16px_50px_-16px_rgba(229,30,125,1)]"
     :class="[baseStyle, size]"
     data-ui="ui-button"
@@ -10,36 +11,36 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, computed } from 'vue'
-import { colorVariants } from './UiButton.params.js'
+import { toRefs, computed } from "vue";
+import { colorVariants } from "./UiButton.params.js";
 
 const props = defineProps({
   tag: {
     type: String,
-    default: 'button',
+    default: "button",
   },
   variants: {
-    type: String as () => 'primary' | 'secondary',
-    default: 'primary',
+    type: String as () => "primary" | "secondary",
+    default: "primary",
     validator: (value) => {
-      return ['primary', 'secondary'].includes(value as string)
+      return ["primary", "secondary"].includes(value as string);
     },
   },
   size: {
     type: String,
-    default: 'font-bold',
+    default: "font-bold",
   },
-})
+});
 
-const { tag, variants, size } = toRefs(props)
+const { tag, variants, size } = toRefs(props);
 
-const colorClasses: Record<'primary' | 'secondary', string[]> = {
+const colorClasses: Record<"primary" | "secondary", string[]> = {
   primary: colorVariants.primary,
   secondary: colorVariants.secondary,
-}
+};
 
 const baseStyle = computed(() => {
-  const variant = variants.value as 'primary' | 'secondary'
-  return colorClasses[variant]?.join(' ') || ''
-})
+  const variant = variants.value as "primary" | "secondary";
+  return colorClasses[variant]?.join(" ") || "";
+});
 </script>