Merge pull request #632 from devforth/feature/AdminForth/1655/https-claude.-variant-props-an

fix: add variant prop, deprecate mode

Author: SerVitasik

adminforth/spa/src/afcl/Button.vue

@@ -7,7 +7,7 @@
     :class="{
       'cursor-default opacity-50 pointer-events-none': props.disabled,
       'active brightness-200 hover:brightness-150'  : props.active,
-      'text-lightSecondaryContrast/70 bg-lightSecondary border-lightSecondaryContrast/30 dark:bg-darkSecondary hover:bg-lightSecondary/60 hover:border-lightSecondaryContrast/60 focus:ring-lightSecondary dark:focus:ring-darkSecondary/40 dark:text-darkSecondaryContrast dark:border-darkSecondaryContrast/40 dark:hover:bg-darkSecondary/60 dark:hover:border-white/60': props.mode === 'secondary',
+      'text-lightSecondaryContrast/70 bg-lightSecondary border-lightSecondaryContrast/30 dark:bg-darkSecondary hover:bg-lightSecondary/60 hover:border-lightSecondaryContrast/60 focus:ring-lightSecondary dark:focus:ring-darkSecondary/40 dark:text-darkSecondaryContrast dark:border-darkSecondaryContrast/40 dark:hover:bg-darkSecondary/60 dark:hover:border-white/60': currentVariant === 'secondary',
     }"
   >
     <Spinner v-if="props.loader" class="w-4 h-4 text-lightButtonsText dark:text-darkButtonsText fill-lightButtonsBackground dark:fill-darkPrimary" />
@@ -17,17 +17,22 @@
 
 <script setup lang="ts">
 import { Spinner } from '@/afcl';
+import { computed } from 'vue';
 
 const props = withDefaults(defineProps<{
   loader?: boolean;
   disabled?: boolean;
   active?: boolean;
+  variant?: 'primary' | 'secondary';
+  /** @deprecated use variant instead of mode */
   mode?: 'primary' | 'secondary';
 }>(), {
   loader: false,
   disabled: false,
   active: false,
-  mode: 'primary'
 });
 
+// mode is deprecated, but we still want to support it for backward compatibility,
+// so we check both variant and mode props
+const currentVariant = computed(() => props.variant ?? props.mode ?? 'primary');
 </script>