format with updated rules

Author: vikdiesel

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { RouterView } from "vue-router";
+import { RouterView } from 'vue-router'
 </script>
 
 <template>

src/colors.js

@@ -1,138 +1,130 @@
-export const gradientBgBase = "bg-gradient-to-tr";
-export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`;
-export const gradientBgDark = `${gradientBgBase} from-slate-700 via-slate-900 to-slate-800`;
-export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`;
+export const gradientBgBase = 'bg-gradient-to-tr'
+export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`
+export const gradientBgDark = `${gradientBgBase} from-slate-700 via-slate-900 to-slate-800`
+export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`
 
 export const colorsBgLight = {
-  white: "bg-white text-black",
-  light: "bg-white text-black dark:bg-slate-900/70 dark:text-white",
-  contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
-  success: "bg-emerald-500 border-emerald-500 text-white",
-  danger: "bg-red-500 border-red-500 text-white",
-  warning: "bg-yellow-500 border-yellow-500 text-white",
-  info: "bg-blue-500 border-blue-500 text-white",
-};
+  white: 'bg-white text-black',
+  light: 'bg-white text-black dark:bg-slate-900/70 dark:text-white',
+  contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
+  success: 'bg-emerald-500 border-emerald-500 text-white',
+  danger: 'bg-red-500 border-red-500 text-white',
+  warning: 'bg-yellow-500 border-yellow-500 text-white',
+  info: 'bg-blue-500 border-blue-500 text-white'
+}
 
 export const colorsText = {
-  white: "text-black dark:text-slate-100",
-  light: "text-gray-700 dark:text-slate-400",
-  contrast: "dark:text-white",
-  success: "text-emerald-500",
-  danger: "text-red-500",
-  warning: "text-yellow-500",
-  info: "text-blue-500",
-};
+  white: 'text-black dark:text-slate-100',
+  light: 'text-gray-700 dark:text-slate-400',
+  contrast: 'dark:text-white',
+  success: 'text-emerald-500',
+  danger: 'text-red-500',
+  warning: 'text-yellow-500',
+  info: 'text-blue-500'
+}
 
 export const colorsOutline = {
-  white: [colorsText.white, "border-gray-100"],
-  light: [colorsText.light, "border-gray-100"],
-  contrast: [colorsText.contrast, "border-gray-900 dark:border-slate-100"],
-  success: [colorsText.success, "border-emerald-500"],
-  danger: [colorsText.danger, "border-red-500"],
-  warning: [colorsText.warning, "border-yellow-500"],
-  info: [colorsText.info, "border-blue-500"],
-};
+  white: [colorsText.white, 'border-gray-100'],
+  light: [colorsText.light, 'border-gray-100'],
+  contrast: [colorsText.contrast, 'border-gray-900 dark:border-slate-100'],
+  success: [colorsText.success, 'border-emerald-500'],
+  danger: [colorsText.danger, 'border-red-500'],
+  warning: [colorsText.warning, 'border-yellow-500'],
+  info: [colorsText.info, 'border-blue-500']
+}
 
-export const getButtonColor = (
-  color,
-  isOutlined,
-  hasHover,
-  isActive = false
-) => {
+export const getButtonColor = (color, isOutlined, hasHover, isActive = false) => {
   const colors = {
     ring: {
-      white: "ring-gray-200 dark:ring-gray-500",
-      whiteDark: "ring-gray-200 dark:ring-gray-500",
-      lightDark: "ring-gray-200 dark:ring-gray-500",
-      contrast: "ring-gray-300 dark:ring-gray-400",
-      success: "ring-emerald-300 dark:ring-emerald-700",
-      danger: "ring-red-300 dark:ring-red-700",
-      warning: "ring-yellow-300 dark:ring-yellow-700",
-      info: "ring-blue-300 dark:ring-blue-700",
+      white: 'ring-gray-200 dark:ring-gray-500',
+      whiteDark: 'ring-gray-200 dark:ring-gray-500',
+      lightDark: 'ring-gray-200 dark:ring-gray-500',
+      contrast: 'ring-gray-300 dark:ring-gray-400',
+      success: 'ring-emerald-300 dark:ring-emerald-700',
+      danger: 'ring-red-300 dark:ring-red-700',
+      warning: 'ring-yellow-300 dark:ring-yellow-700',
+      info: 'ring-blue-300 dark:ring-blue-700'
     },
     active: {
-      white: "bg-gray-100",
-      whiteDark: "bg-gray-100 dark:bg-slate-800",
-      lightDark: "bg-gray-200 dark:bg-slate-700",
-      contrast: "bg-gray-700 dark:bg-slate-100",
-      success: "bg-emerald-700 dark:bg-emerald-600",
-      danger: "bg-red-700 dark:bg-red-600",
-      warning: "bg-yellow-700 dark:bg-yellow-600",
-      info: "bg-blue-700 dark:bg-blue-600",
+      white: 'bg-gray-100',
+      whiteDark: 'bg-gray-100 dark:bg-slate-800',
+      lightDark: 'bg-gray-200 dark:bg-slate-700',
+      contrast: 'bg-gray-700 dark:bg-slate-100',
+      success: 'bg-emerald-700 dark:bg-emerald-600',
+      danger: 'bg-red-700 dark:bg-red-600',
+      warning: 'bg-yellow-700 dark:bg-yellow-600',
+      info: 'bg-blue-700 dark:bg-blue-600'
     },
     bg: {
-      white: "bg-white text-black",
-      whiteDark: "bg-white text-black dark:bg-slate-900 dark:text-white",
-      lightDark: "bg-gray-100 text-black dark:bg-slate-800 dark:text-white",
-      contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
-      success: "bg-emerald-600 dark:bg-emerald-500 text-white",
-      danger: "bg-red-600 dark:bg-red-500 text-white",
-      warning: "bg-yellow-600 dark:bg-yellow-500 text-white",
-      info: "bg-blue-600 dark:bg-blue-500 text-white",
+      white: 'bg-white text-black',
+      whiteDark: 'bg-white text-black dark:bg-slate-900 dark:text-white',
+      lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
+      contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
+      success: 'bg-emerald-600 dark:bg-emerald-500 text-white',
+      danger: 'bg-red-600 dark:bg-red-500 text-white',
+      warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
+      info: 'bg-blue-600 dark:bg-blue-500 text-white'
     },
     bgHover: {
-      white: "hover:bg-gray-100",
-      whiteDark: "hover:bg-gray-100 hover:dark:bg-slate-800",
-      lightDark: "hover:bg-gray-200 hover:dark:bg-slate-700",
-      contrast: "hover:bg-gray-700 hover:dark:bg-slate-100",
+      white: 'hover:bg-gray-100',
+      whiteDark: 'hover:bg-gray-100 hover:dark:bg-slate-800',
+      lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
+      contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
       success:
-        "hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600",
+        'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
       danger:
-        "hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600",
+        'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
       warning:
-        "hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600",
-      info: "hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600",
+        'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
+      info: 'hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600'
     },
     borders: {
-      white: "border-white",
-      whiteDark: "border-white dark:border-slate-900",
-      lightDark: "border-gray-100 dark:border-slate-800",
-      contrast: "border-gray-800 dark:border-white",
-      success: "border-emerald-600 dark:border-emerald-500",
-      danger: "border-red-600 dark:border-red-500",
-      warning: "border-yellow-600 dark:border-yellow-500",
-      info: "border-blue-600 dark:border-blue-500",
+      white: 'border-white',
+      whiteDark: 'border-white dark:border-slate-900',
+      lightDark: 'border-gray-100 dark:border-slate-800',
+      contrast: 'border-gray-800 dark:border-white',
+      success: 'border-emerald-600 dark:border-emerald-500',
+      danger: 'border-red-600 dark:border-red-500',
+      warning: 'border-yellow-600 dark:border-yellow-500',
+      info: 'border-blue-600 dark:border-blue-500'
     },
     text: {
-      contrast: "dark:text-slate-100",
-      success: "text-emerald-600 dark:text-emerald-500",
-      danger: "text-red-600 dark:text-red-500",
-      warning: "text-yellow-600 dark:text-yellow-500",
-      info: "text-blue-600 dark:text-blue-500",
+      contrast: 'dark:text-slate-100',
+      success: 'text-emerald-600 dark:text-emerald-500',
+      danger: 'text-red-600 dark:text-red-500',
+      warning: 'text-yellow-600 dark:text-yellow-500',
+      info: 'text-blue-600 dark:text-blue-500'
     },
     outlineHover: {
       contrast:
-        "hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black",
+        'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
       success:
-        "hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600",
+        'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600',
       danger:
-        "hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600",
+        'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
       warning:
-        "hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600",
-      info: "hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600",
-    },
-  };
+        'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
+      info: 'hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600'
+    }
+  }
 
   if (!colors.bg[color]) {
-    return color;
+    return color
   }
 
-  const isOutlinedProcessed =
-    isOutlined && ["white", "whiteDark", "lightDark"].indexOf(color) < 0;
+  const isOutlinedProcessed = isOutlined && ['white', 'whiteDark', 'lightDark'].indexOf(color) < 0
 
-  const base = [colors.borders[color], colors.ring[color]];
+  const base = [colors.borders[color], colors.ring[color]]
 
   if (isActive) {
-    base.push(colors.active[color]);
+    base.push(colors.active[color])
   } else {
-    base.push(isOutlinedProcessed ? colors.text[color] : colors.bg[color]);
+    base.push(isOutlinedProcessed ? colors.text[color] : colors.bg[color])
   }
 
   if (hasHover) {
-    base.push(
-      isOutlinedProcessed ? colors.outlineHover[color] : colors.bgHover[color]
-    );
+    base.push(isOutlinedProcessed ? colors.outlineHover[color] : colors.bgHover[color])
   }
 
-  return base;
-};
+  return base
+}

src/components/AsideMenu.vue

@@ -1,40 +1,36 @@
 <script setup>
-import AsideMenuLayer from "@/components/AsideMenuLayer.vue";
-import OverlayLayer from "@/components/OverlayLayer.vue";
+import AsideMenuLayer from '@/components/AsideMenuLayer.vue'
+import OverlayLayer from '@/components/OverlayLayer.vue'
 
 defineProps({
   menu: {
     type: Array,
-    required: true,
+    required: true
   },
   isAsideMobileExpanded: Boolean,
-  isAsideLgActive: Boolean,
-});
+  isAsideLgActive: Boolean
+})
 
-const emit = defineEmits(["menu-click", "aside-lg-close-click"]);
+const emit = defineEmits(['menu-click', 'aside-lg-close-click'])
 
 const menuClick = (event, item) => {
-  emit("menu-click", event, item);
-};
+  emit('menu-click', event, item)
+}
 
 const asideLgCloseClick = (event) => {
-  emit("aside-lg-close-click", event);
-};
+  emit('aside-lg-close-click', event)
+}
 </script>
 
 <template>
   <AsideMenuLayer
     :menu="menu"
     :class="[
       isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0',
-      { 'lg:hidden xl:flex': !isAsideLgActive },
+      { 'lg:hidden xl:flex': !isAsideLgActive }
     ]"
     @menu-click="menuClick"
     @aside-lg-close-click="asideLgCloseClick"
   />
-  <OverlayLayer
-    v-show="isAsideLgActive"
-    z-index="z-30"
-    @overlay-click="asideLgCloseClick"
-  />
+  <OverlayLayer v-show="isAsideLgActive" z-index="z-30" @overlay-click="asideLgCloseClick" />
 </template>

src/components/AsideMenuItem.vue

@@ -1,48 +1,48 @@
 <script setup>
-import { ref, computed } from "vue";
-import { RouterLink } from "vue-router";
-import { useStyleStore } from "@/stores/style.js";
-import { mdiMinus, mdiPlus } from "@mdi/js";
-import { getButtonColor } from "@/colors.js";
-import BaseIcon from "@/components/BaseIcon.vue";
-import AsideMenuList from "@/components/AsideMenuList.vue";
+import { ref, computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useStyleStore } from '@/stores/style.js'
+import { mdiMinus, mdiPlus } from '@mdi/js'
+import { getButtonColor } from '@/colors.js'
+import BaseIcon from '@/components/BaseIcon.vue'
+import AsideMenuList from '@/components/AsideMenuList.vue'
 
 const props = defineProps({
   item: {
     type: Object,
-    required: true,
+    required: true
   },
-  isDropdownList: Boolean,
-});
+  isDropdownList: Boolean
+})
 
-const emit = defineEmits(["menu-click"]);
+const emit = defineEmits(['menu-click'])
 
-const styleStore = useStyleStore();
+const styleStore = useStyleStore()
 
-const hasColor = computed(() => props.item && props.item.color);
+const hasColor = computed(() => props.item && props.item.color)
 
 const asideMenuItemActiveStyle = computed(() =>
-  hasColor.value ? "" : styleStore.asideMenuItemActiveStyle
-);
+  hasColor.value ? '' : styleStore.asideMenuItemActiveStyle
+)
 
-const isDropdownActive = ref(false);
+const isDropdownActive = ref(false)
 
 const componentClass = computed(() => [
-  props.isDropdownList ? "py-3 px-6 text-sm" : "py-3",
+  props.isDropdownList ? 'py-3 px-6 text-sm' : 'py-3',
   hasColor.value
     ? getButtonColor(props.item.color, false, true)
-    : `${styleStore.asideMenuItemStyle} dark:text-slate-300 dark:hover:text-white`,
-]);
+    : `${styleStore.asideMenuItemStyle} dark:text-slate-300 dark:hover:text-white`
+])
 
-const hasDropdown = computed(() => !!props.item.menu);
+const hasDropdown = computed(() => !!props.item.menu)
 
 const menuClick = (event) => {
-  emit("menu-click", event, props.item);
+  emit('menu-click', event, props.item)
 
   if (hasDropdown.value) {
-    isDropdownActive.value = !isDropdownActive.value;
+    isDropdownActive.value = !isDropdownActive.value
   }
-};
+}
 </script>
 
 <template>
@@ -69,7 +69,7 @@ const menuClick = (event) => {
         class="grow text-ellipsis line-clamp-1"
         :class="[
           { 'pr-12': !hasDropdown },
-          vSlot && vSlot.isExactActive ? asideMenuItemActiveStyle : '',
+          vSlot && vSlot.isExactActive ? asideMenuItemActiveStyle : ''
         ]"
         >{{ item.label }}</span
       >
@@ -86,7 +86,7 @@ const menuClick = (event) => {
       :menu="item.menu"
       :class="[
         styleStore.asideMenuDropdownStyle,
-        isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden',
+        isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden'
       ]"
       is-dropdown-list
     />