chore(lint): switched to a better lint config

src/ui/c-button/c-button.demo.vue

@@ -1,3 +1,11 @@
+<script lang="ts" setup>
+import _ from 'lodash';
+
+const buttonVariants = ['basic', 'text'] as const;
+const buttonTypes = ['default', 'primary', 'warning', 'error'] as const;
+const buttonSizes = ['small', 'medium', 'large'] as const;
+</script>
+
 <template>
   <div v-for="buttonVariant of buttonVariants" :key="buttonVariant">
     <h2>{{ _.capitalize(buttonVariant) }}</h2>
@@ -40,13 +48,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts" setup>
-import _ from 'lodash';
-
-const buttonVariants = ['basic', 'text'] as const;
-const buttonTypes = ['default', 'primary', 'warning', 'error'] as const;
-const buttonSizes = ['small', 'medium', 'large'] as const;
-</script>
-
-<style lang="less" scoped></style>

src/ui/c-button/c-button.theme.ts

@@ -2,7 +2,7 @@ import { darken, lighten } from '../color/color.models';
 import { defineThemes } from '../theme/theme.models';
 import { appThemes } from '../theme/themes';
 
-const createState = ({
+function createState({
   textColor,
   backgroundColor,
   hoverBackground,
@@ -10,20 +10,22 @@ const createState = ({
   pressedBackground,
   pressedTextColor = textColor,
 }: {
-  textColor: string;
-  backgroundColor: string;
-  hoverBackground: string;
-  hoveredTextColor?: string;
-  pressedBackground: string;
-  pressedTextColor?: string;
-}) => ({
-  textColor,
-  backgroundColor,
-  hover: { textColor: hoveredTextColor, backgroundColor: hoverBackground },
-  pressed: { textColor: pressedTextColor, backgroundColor: pressedBackground },
-});
+  textColor: string
+  backgroundColor: string
+  hoverBackground: string
+  hoveredTextColor?: string
+  pressedBackground: string
+  pressedTextColor?: string
+}) {
+  return {
+    textColor,
+    backgroundColor,
+    hover: { textColor: hoveredTextColor, backgroundColor: hoverBackground },
+    pressed: { textColor: pressedTextColor, backgroundColor: pressedBackground },
+  };
+}
 
-const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
+function createTheme({ style }: { style: 'light' | 'dark' }) {
   const theme = appThemes[style];
 
   return {
@@ -95,7 +97,7 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
       }),
     },
   };
-};
+}
 
 export const { useTheme } = defineThemes({
   dark: createTheme({ style: 'dark' }),

src/ui/c-button/c-button.vue

@@ -1,31 +1,18 @@
-<template>
-  <component
-    :is="tag"
-    :href="href ?? to"
-    class="c-button"
-    :class="{ disabled, round, circle }"
-    :to="to"
-    @click="handleClick"
-  >
-    <slot />
-  </component>
-</template>
-
 <script lang="ts" setup>
 import type { RouteLocationRaw } from 'vue-router';
-import { useTheme } from './c-button.theme';
 import { useAppTheme } from '../theme/themes';
+import { useTheme } from './c-button.theme';
 
 const props = withDefaults(
   defineProps<{
-    type?: 'default' | 'primary' | 'warning' | 'error';
-    variant?: 'basic' | 'text';
-    disabled?: boolean;
-    round?: boolean;
-    circle?: boolean;
-    href?: string;
-    to?: RouteLocationRaw;
-    size?: 'small' | 'medium' | 'large';
+    type?: 'default' | 'primary' | 'warning' | 'error'
+    variant?: 'basic' | 'text'
+    disabled?: boolean
+    round?: boolean
+    circle?: boolean
+    href?: string
+    to?: RouteLocationRaw
+    size?: 'small' | 'medium' | 'large'
   }>(),
   {
     type: 'default',
@@ -38,10 +25,10 @@ const props = withDefaults(
     size: 'medium',
   },
 );
-const { variant, disabled, round, circle, href, type, to, size: sizeName } = toRefs(props);
-
 const emits = defineEmits(['click']);
 
+const { variant, disabled, round, circle, href, type, to, size: sizeName } = toRefs(props);
+
 function handleClick(event: MouseEvent) {
   if (!disabled.value) {
     emits('click', event);
@@ -64,6 +51,19 @@ const appTheme = useAppTheme();
 const size = computed(() => theme.value.size[sizeName.value]);
 </script>
 
+<template>
+  <component
+    :is="tag"
+    :href="href ?? to"
+    class="c-button"
+    :class="{ disabled, round, circle }"
+    :to="to"
+    @click="handleClick"
+  >
+    <slot />
+  </component>
+</template>
+
 <style lang="less" scoped>
 .c-button {
   line-height: 1;