@cnamts/synapse 1.0.25 → 1.0.27

package/src/composables/unifyValidation/useCustomValidation.ts

@@ -1,6 +1,6 @@
 import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 import { useValidatable } from '@/composables/validation/useValidatable'
-import { watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
 /**
@@ -15,29 +15,41 @@ export function useCustomValidation(
 	warnings: Ref<string[]>,
 	successes: Ref<string[]>,
 	showSuccessMessages: Ref<boolean>,
-	label: Ref<string>,
+	label: Ref<string | undefined>,
 	focused: Ref<boolean>,
 	isValidateOnBlur: Ref<boolean>,
 	disableErrorHandling: Ref<boolean>,
 	readonly?: Ref<boolean>,
 	disabled?: Ref<boolean>,
 ) {
-	let validator = useValidation({
+	const hasSuccess = ref(false)
+
+	const validatorOptions = reactive({
 		showSuccessMessages: showSuccessMessages.value,
 		fieldIdentifier: label.value,
 		disableErrorHandling: disableErrorHandling.value,
 	})
 
+	const validator = useValidation(validatorOptions)
+
 	watch(
-		() => [showSuccessMessages.value, label.value, customRules?.value, customWarningRules?.value, customSuccessRules?.value, disableErrorHandling.value],
+		() => [showSuccessMessages.value, label.value, disableErrorHandling.value],
 		() => {
-			validator = useValidation({
-				showSuccessMessages: showSuccessMessages.value,
-				fieldIdentifier: label.value,
-				disableErrorHandling: disableErrorHandling.value,
-			})
+			validatorOptions.showSuccessMessages = showSuccessMessages.value
+			validatorOptions.fieldIdentifier = label.value
+			validatorOptions.disableErrorHandling = disableErrorHandling.value
+
+			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0 || hasSuccess.value
+			if (isDirty) {
+				validate()
+			}
+		},
+	)
 
-			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0
+	watch(
+		() => [customRules?.value, customWarningRules?.value, customSuccessRules?.value],
+		() => {
+			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0 || hasSuccess.value
 			if (isDirty) {
 				validate()
 			}
@@ -50,6 +62,7 @@ export function useCustomValidation(
 			errors.value = []
 			warnings.value = []
 			successes.value = []
+			hasSuccess.value = false
 			return { hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [] as string[], warnings: [] as string[], successes: [] as string[] } }
 		}
 
@@ -63,6 +76,7 @@ export function useCustomValidation(
 		errors.value = result.state.errors
 		warnings.value = result.state.warnings
 		successes.value = result.state.successes
+		hasSuccess.value = result.hasSuccess
 
 		return result
 	}
@@ -75,12 +89,13 @@ export function useCustomValidation(
 			errors.value = []
 			warnings.value = []
 			successes.value = []
+			hasSuccess.value = false
 		},
 		() => modelValue.value = undefined,
 	)
 
 	watch(focused, (newVal) => {
-		if (!newVal && !disableErrorHandling.value) {
+		if (isValidateOnBlur.value && !newVal && !disableErrorHandling.value) {
 			validate()
 		}
 	})
@@ -91,5 +106,12 @@ export function useCustomValidation(
 		}
 	})
 
-	return { validate }
+	function clearValidation() {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+		hasSuccess.value = false
+	}
+
+	return { validate, hasSuccess, clearValidation }
 }

package/src/composables/unifyValidation/useValidation.ts

@@ -4,34 +4,41 @@ import type { ValidationRule as VuetifyValidationRule } from 'vuetify'
 import { useCustomValidation } from './useCustomValidation'
 import { useVuetifyValidation as useVuetifyValidationComposable } from './useVuetifyValidation'
 
+export type { VuetifyValidationRule }
+export type { SyValidationRule as ValidationRule }
+
 export interface FieldValidationProps {
+	customRules?: SyValidationRule[]
+	customSuccessRules?: SyValidationRule[]
+	customWarningRules?: SyValidationRule[]
+	disableErrorHandling?: boolean
+	disabled?: boolean
+	errorMessages?: string[] | null
+	hasError?: boolean
+	hasSuccess?: boolean
+	hasWarning?: boolean
+	isValidateOnBlur?: boolean
+	label?: string
+	maxErrors?: number
 	modelValue?: unknown
 	readonly?: boolean
-	disabled?: boolean
 	required?: boolean
-	isValidateOnBlur?: boolean
+	rules?: VuetifyValidationRule[]
 	showSuccessMessages?: boolean
-	disableErrorHandling?: boolean
+	successMessages?: string[] | null
 	// When true (Vuetify native mode), the controller should not handle errors/successes
 	useVuetifyValidation?: boolean
-	label: string
-	rules?: VuetifyValidationRule[]
-	customRules?: SyValidationRule[]
-	customWarningRules?: SyValidationRule[]
-	customSuccessRules?: SyValidationRule[]
-	errorMessages?: string[] | null
 	warningMessages?: string[] | null
-	successMessages?: string[] | null
-	hasError?: boolean
-	hasWarning?: boolean
-	hasSuccess?: boolean
-	maxErrors?: number
 }
 
 /**
- * Entrypoint to handle validation in fields components.
- * It handles both Vuetify native validation (if useVuetifyValidation is true) and Synapse custom validation (if customRules are provided).
- * It also provides a unified interface to handle errors, warnings and successes, and to trigger validation on demand.
+ * Point d'entrée de la validation pour les composants de champ.
+ * Gère à la fois la validation native Vuetify (si useVuetifyValidation vaut true)
+ * et la validation custom Synapse (si customRules/customWarningRules/customSuccessRules sont fournis).
+ * customRules correspond aux règles d'erreur bloquantes.
+ * errorMessages/warningMessages/successMessages sont des messages externes injectés par le parent
+ * et ne déclenchent aucun calcul de validation.
+ * Expose aussi une interface unifiée pour les erreurs, avertissements, succès et la validation à la demande.
  */
 export const validationPropsDefaults = {
 	readonly: false,
@@ -61,7 +68,7 @@ export function useValidation(params: {
 	isValidateOnBlur: Ref<boolean>
 	showSuccessMessages: Ref<boolean>
 	disableErrorHandling: Ref<boolean>
-	label: Ref<string>
+	label: Ref<string | undefined>
 	focused: Ref<boolean>
 	errorMessages?: Ref<string[] | null | undefined>
 	warningMessages?: Ref<string[] | null | undefined>
@@ -95,13 +102,15 @@ export function useValidation(params: {
 			errors: ref<string[]>([]),
 			warnings: ref<string[]>([]),
 			successes: ref<string[]>([]),
-			hasError: computed(() => false),
-			hasWarning: computed(() => false),
-			hasSuccess: computed(() => false),
+			hasError: computed(() => params.hasErrorProp?.value ?? false),
+			hasWarning: computed(() => params.hasWarningProp?.value ?? false),
+			hasSuccess: computed(() => params.hasSuccessProp?.value ?? false),
 			validate: async () => true,
+			clearValidation: () => {},
 		}
 	}
-	const innerErrors = ref<string[]>([])
+	const vuetifyErrors = ref<string[]>([])
+	const customErrors = ref<string[]>([])
 	const innerWarnings = ref<string[]>([])
 	const innerSuccesses = ref<string[]>([])
 
@@ -112,7 +121,7 @@ export function useValidation(params: {
 			params.modelValue,
 			params.rules,
 			params.disabled,
-			innerErrors,
+			vuetifyErrors,
 			params.hasErrorProp || ref(false),
 			computed(() => params.errorMessages?.value || []),
 			params.focused,
@@ -129,7 +138,7 @@ export function useValidation(params: {
 		params.customRules,
 		params.customWarningRules,
 		params.customSuccessRules,
-		innerErrors,
+		customErrors,
 		innerWarnings,
 		innerSuccesses,
 		params.showSuccessMessages,
@@ -143,7 +152,8 @@ export function useValidation(params: {
 
 	async function validate(): Promise<boolean> {
 		if (params.readonly.value || params.disabled.value || params.disableErrorHandling.value) {
-			innerErrors.value = []
+			vuetifyErrors.value = []
+			customErrors.value = []
 			innerWarnings.value = []
 			innerSuccesses.value = []
 
@@ -162,7 +172,8 @@ export function useValidation(params: {
 	}
 
 	const errors = computed(() => [...new Set([
-		...innerErrors.value,
+		...vuetifyErrors.value,
+		...customErrors.value,
 		...(params.errorMessages?.value || []),
 	])])
 	const warnings = computed(() => [...new Set([
@@ -173,10 +184,26 @@ export function useValidation(params: {
 		...(params.showSuccessMessages.value ? innerSuccesses.value : []),
 		...(params.successMessages?.value || []),
 	])])
+	const internalHasSuccess = computed(() => customValidator.hasSuccess.value)
 
 	const hasError = computed(() => errors.value.length > 0 || params.hasErrorProp?.value)
 	const hasWarning = computed(() => warnings.value.length > 0 || params.hasWarningProp?.value)
-	const hasSuccess = computed(() => (successes.value.length > 0 && !hasError.value && !hasWarning.value) || params.hasSuccessProp?.value)
+	// TODO: vérifier si c'est la meilleure approche pour supprimer le succès en mode Vuetify
+	const hasSuccess = computed(() => {
+		if (toValue(params.useVuetifyValidation)) {
+			return params.hasSuccessProp?.value ?? false
+		}
+		return (
+			(internalHasSuccess.value || (params.successMessages?.value?.length ?? 0) > 0)
+			&& !hasError.value
+			&& !hasWarning.value
+		) || (params.hasSuccessProp?.value ?? false)
+	})
+
+	function clearValidation() {
+		vuetifyErrors.value = []
+		customValidator.clearValidation()
+	}
 
 	return {
 		errors,
@@ -186,5 +213,6 @@ export function useValidation(params: {
 		hasWarning,
 		hasSuccess,
 		validate,
+		clearValidation,
 	}
 }

package/src/composables/unifyValidation/useVuetifyValidation.ts

@@ -12,8 +12,8 @@ export function useVuetifyValidation(
 	errorMessages: Ref<string[]>,
 	focused: Ref<boolean>,
 	maxErrors: Ref<number> | undefined,
-	name: Ref<string>,
-	label: Ref<string>,
+	name: Ref<string | undefined>,
+	label: Ref<string | undefined>,
 	readonly: Ref<boolean>,
 	validateOn: Ref<'input' | 'blur' | 'submit'>,
 ) {

package/src/composables/useFilterable/useFilterable.spec.ts

@@ -213,6 +213,48 @@ describe('Filterable', () => {
 			expect(filterCount).toBe(0)
 		})
 
+		it('returns a chip when only from is set', () => {
+			const { getChips, getFilterCount } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			const filter = {
+				name: 'Test',
+				value: {
+					from: '2024-01-01',
+					to: null,
+				},
+			}
+
+			const chips = getChips(filter)
+			const filterCount = getFilterCount(filter)
+
+			expect(chips).toEqual([{ text: '2024-01-01 –', value: { from: '2024-01-01', to: null } }])
+			expect(filterCount).toBe(1)
+		})
+
+		it('returns a chip when only to is set', () => {
+			const { getChips, getFilterCount } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			const filter = {
+				name: 'Test',
+				value: {
+					from: null,
+					to: '2024-12-31',
+				},
+			}
+
+			const chips = getChips(filter)
+			const filterCount = getFilterCount(filter)
+
+			expect(chips).toEqual([{ text: '– 2024-12-31', value: { from: null, to: '2024-12-31' } }])
+			expect(filterCount).toBe(1)
+		})
+
 		it('returns the correct text when the value is an object', () => {
 			const { getChips, getFilterCount } = useFilterable(
 				ref([]),

package/src/composables/useFilterable/useFilterable.ts

@@ -98,16 +98,20 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				= typedValue.from !== undefined && typedValue.to !== undefined
 
 			if (isPeriodField) {
-				if (typedValue.from === null || typedValue.to === null) {
+				const hasFrom = typedValue.from !== null
+				const hasTo = typedValue.to !== null
+
+				if (!hasFrom && !hasTo) {
 					return []
 				}
 
-				return [
-					{
-						text: `${typedValue.from} – ${typedValue.to}`,
-						value: typedValue,
-					},
-				]
+				const text = hasFrom && hasTo
+					? `${typedValue.from} – ${typedValue.to}`
+					: hasFrom
+						? `${typedValue.from} –`
+						: `– ${typedValue.to}`
+
+				return [{ text, value: typedValue }]
 			}
 
 			// Handle single select objects (VSelect with return-object but without multiple)

package/src/composables/useFormFieldErrorHandling.ts

@@ -84,8 +84,8 @@ export const useFormFieldErrorHandling = (
 
 		const result = await validation.validateField(
 			value,
-			[...defaultRules.value, ...props.customRules!],
-			props.customWarningRules!,
+			[...defaultRules.value, ...(props.customRules ?? [])],
+			props.customWarningRules ?? [],
 		)
 
 		return !result.hasError
@@ -123,7 +123,10 @@ export const useFormFieldErrorHandling = (
 
 	const hasError = computed(() => validation.hasError.value || (props.hasError ?? false))
 	const hasWarning = computed(() => validation.hasWarning.value || (props.hasWarning ?? false))
-	const hasSuccess = computed(() => ((validation.hasSuccess.value && !hasError.value && !hasWarning.value) || (props.hasSuccess ?? false)) && (props.showSuccessMessages ?? true))
+	const hasSuccess = computed(() =>
+		(validation.hasSuccess.value && !hasError.value && !hasWarning.value)
+		|| (props.hasSuccess ?? false),
+	)
 
 	const errors = computed(() => [...validation.errors.value, ...(props.errorMessages || [])])
 	const warnings = computed(() => validation.warnings.value)

package/src/composables/validation/tests/useValidation.spec.ts

@@ -90,7 +90,7 @@ describe('useValidation', () => {
 		expect(validResult.hasSuccess).toBe(true)
 	})
 
-	it('should respect showSuccessMessages option', async () => {
+	it('keeps the success state when showSuccessMessages is false while hiding messages', async () => {
 		const validation = useValidation({ showSuccessMessages: false })
 		const rules = [{
 			type: 'required',
@@ -101,7 +101,7 @@ describe('useValidation', () => {
 		}]
 
 		const result = await validation.validateField('test', rules)
-		expect(result.hasSuccess).toBe(false)
+		expect(result.hasSuccess).toBe(true)
 		expect(result.state.successes).toEqual([])
 	})
 

package/src/composables/validation/useValidation.ts

@@ -59,6 +59,7 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 	const errors = ref<string[]>([])
 	const warnings = ref<string[]>([])
 	const successes = ref<string[]>([])
+	const successState = ref(false)
 
 	let currentValidationToken = 0
 
@@ -67,13 +68,17 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 	const hasError = computed(() => errors.value.length > 0)
 	const hasWarning = computed(() => warnings.value.length > 0)
 	const hasSuccess = computed(() =>
-		successes.value.length > 0 && !hasError.value && !hasWarning.value,
+		successState.value && !hasError.value && !hasWarning.value,
+	)
+	const displaySuccesses = computed(() =>
+		options.showSuccessMessages !== false ? successes.value : [],
 	)
 
 	const clearValidation = () => {
 		errors.value = []
 		warnings.value = []
 		successes.value = []
+		successState.value = false
 	}
 
 	/**
@@ -176,8 +181,12 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 				}
 			}
 
-			if (!hasValidationError && value && options.showSuccessMessages !== false && successRules.length === 0) {
-				addDefaultSuccessMessage(rules)
+			const isValueFilled = Array.isArray(value) ? value.length > 0 : !!value
+			if (!hasValidationError && isValueFilled && successRules.length === 0) {
+				successState.value = true
+				if (options.showSuccessMessages !== false) {
+					addDefaultSuccessMessage(rules)
+				}
 			}
 
 			if (!hasValidationError && warningRules.length > 0) {
@@ -206,6 +215,8 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 		const successResolved = executeRules(successRules, value, { isSuccess: true })
 
 		return thenOrSync(successResolved, token, (successResults) => {
+			successState.value = successResults.some(result => Boolean(result.success))
+
 			for (const r of successResults) {
 				if (r.success && options.showSuccessMessages !== false) {
 					successes.value.push(r.success)
@@ -223,6 +234,7 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 		errors,
 		warnings,
 		successes,
+		displaySuccesses,
 		hasError,
 		hasWarning,
 		hasSuccess,

package/src/composantsVuetify/VBtn/VBtn.mdx

@@ -12,55 +12,25 @@ Pour l'API complète du composant, consulter la [documentation Vuetify](https://
 ## Primary
 
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.PrimaryElevated} />
-  <Canvas of={VBtnStories.PrimaryOutlined} />
-  <Canvas of={VBtnStories.PrimaryTonal} />
-  <Canvas of={VBtnStories.PrimaryText} />
-</div>
-
-## Primary – Désactivé
-
-<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.PrimaryElevatedDisabled} />
-  <Canvas of={VBtnStories.PrimaryOutlinedDisabled} />
-  <Canvas of={VBtnStories.PrimaryTonalDisabled} />
-  <Canvas of={VBtnStories.PrimaryTextDisabled} />
+  <Canvas of={VBtnStories.Primary} />
+  <Canvas of={VBtnStories.PrimaryLoading} />
+  <Canvas of={VBtnStories.PrimaryDisabled} />
 </div>
 
 ## Secondary
 
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.SecondaryElevated} />
-  <Canvas of={VBtnStories.SecondaryOutlined} />
-  <Canvas of={VBtnStories.SecondaryTonal} />
-  <Canvas of={VBtnStories.SecondaryText} />
-</div>
-
-## Secondary – Désactivé
-
-<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.SecondaryElevatedDisabled} />
-  <Canvas of={VBtnStories.SecondaryOutlinedDisabled} />
-  <Canvas of={VBtnStories.SecondaryTonalDisabled} />
-  <Canvas of={VBtnStories.SecondaryTextDisabled} />
+  <Canvas of={VBtnStories.Secondary} />
+  <Canvas of={VBtnStories.SecondaryLoading} />
+  <Canvas of={VBtnStories.SecondaryDisabled} />
 </div>
 
 ## Tertiary
 
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.TertiaryElevated} />
-  <Canvas of={VBtnStories.TertiaryOutlined} />
-  <Canvas of={VBtnStories.TertiaryTonal} />
-  <Canvas of={VBtnStories.TertiaryText} />
-</div>
-
-## Tertiary – Désactivé
-
-<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
-  <Canvas of={VBtnStories.TertiaryElevatedDisabled} />
-  <Canvas of={VBtnStories.TertiaryOutlinedDisabled} />
-  <Canvas of={VBtnStories.TertiaryTonalDisabled} />
-  <Canvas of={VBtnStories.TertiaryTextDisabled} />
+  <Canvas of={VBtnStories.Tertiary} />
+  <Canvas of={VBtnStories.TertiaryLoading} />
+  <Canvas of={VBtnStories.TertiaryDisabled} />
 </div>
 
 ## Variants disponibles

package/src/composantsVuetify/VBtn/v-btn.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta = {
 			return { args }
 		},
 		template: `
-      <v-btn :color="args.color" :variant="args.variant" :disabled="args.disabled">
+      <v-btn :color="args.color" :variant="args.variant" :disabled="args.disabled" :loading="args.loading">
         {{ args.label }}
       </v-btn>
     `,
@@ -19,103 +19,43 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // --- Primary ---
-export const PrimaryElevated: Story = {
-	args: { label: 'Button primary elevated', color: 'primary', variant: 'elevated', disabled: false },
+export const Primary: Story = {
+	args: { label: 'Button primary', color: 'primary', variant: 'elevated', disabled: false },
 	parameters: { docs: { source: { code: `<v-btn color="primary" variant="elevated">Button</v-btn>` } } },
 }
-export const PrimaryOutlined: Story = {
-	args: { label: 'Button primary outlined', color: 'primary', variant: 'outlined', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined">Button</v-btn>` } } },
-}
-export const PrimaryTonal: Story = {
-	args: { label: 'Button primary tonal', color: 'primary', variant: 'tonal', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="tonal">Button</v-btn>` } } },
-}
-export const PrimaryText: Story = {
-	args: { label: 'Button primary text', color: 'primary', variant: 'text', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text">Button</v-btn>` } } },
+export const PrimaryLoading: Story = {
+	args: { label: 'Button primary loading', color: 'primary', variant: 'elevated', disabled: false, loading: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="elevated" loading>Button</v-btn>` } } },
 }
-export const PrimaryElevatedDisabled: Story = {
-	args: { label: 'Button primary elevated disabled', color: 'primary', variant: 'elevated', disabled: true },
+export const PrimaryDisabled: Story = {
+	args: { label: 'Button primary disabled', color: 'primary', variant: 'elevated', disabled: true },
 	parameters: { docs: { source: { code: `<v-btn color="primary" variant="elevated" disabled>Button</v-btn>` } } },
 }
-export const PrimaryOutlinedDisabled: Story = {
-	args: { label: 'Button primary outlined disabled', color: 'primary', variant: 'outlined', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined" disabled>Button</v-btn>` } } },
-}
-export const PrimaryTonalDisabled: Story = {
-	args: { label: 'Button primary tonal disabled', color: 'primary', variant: 'tonal', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="tonal" disabled>Button</v-btn>` } } },
-}
-export const PrimaryTextDisabled: Story = {
-	args: { label: 'Button primary text disabled', color: 'primary', variant: 'text', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text" disabled>Button</v-btn>` } } },
-}
 
 // --- Secondary ---
-export const SecondaryElevated: Story = {
-	args: { label: 'Button secondary elevated', color: 'secondary', variant: 'elevated', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="elevated">Button</v-btn>` } } },
-}
-export const SecondaryOutlined: Story = {
-	args: { label: 'Button secondary outlined', color: 'secondary', variant: 'outlined', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="outlined">Button</v-btn>` } } },
-}
-export const SecondaryTonal: Story = {
-	args: { label: 'Button secondary tonal', color: 'secondary', variant: 'tonal', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="tonal">Button</v-btn>` } } },
-}
-export const SecondaryText: Story = {
-	args: { label: 'Button secondary text', color: 'secondary', variant: 'text', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="text">Button</v-btn>` } } },
-}
-export const SecondaryElevatedDisabled: Story = {
-	args: { label: 'Button secondary elevated disabled', color: 'secondary', variant: 'elevated', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="elevated" disabled>Button</v-btn>` } } },
-}
-export const SecondaryOutlinedDisabled: Story = {
-	args: { label: 'Button secondary outlined disabled', color: 'secondary', variant: 'outlined', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="outlined" disabled>Button</v-btn>` } } },
+export const Secondary: Story = {
+	args: { label: 'Button secondary ', color: 'primary', variant: 'outlined', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined">Button</v-btn>` } } },
 }
-export const SecondaryTonalDisabled: Story = {
-	args: { label: 'Button secondary tonal disabled', color: 'secondary', variant: 'tonal', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="tonal" disabled>Button</v-btn>` } } },
+export const SecondaryLoading: Story = {
+	args: { label: 'Button secondary loading', color: 'primary', variant: 'outlined', disabled: false, loading: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined" loading>Button</v-btn>` } } },
 }
-export const SecondaryTextDisabled: Story = {
-	args: { label: 'Button secondary text disabled', color: 'secondary', variant: 'text', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="text" disabled>Button</v-btn>` } } },
+export const SecondaryDisabled: Story = {
+	args: { label: 'Button secondary disabled', color: 'primary', variant: 'outlined', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined" disabled>Button</v-btn>` } } },
 }
 
 // --- Tertiary ---
-export const TertiaryElevated: Story = {
-	args: { label: 'Button tertiary elevated', color: 'tertiary', variant: 'elevated', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="elevated">Button</v-btn>` } } },
-}
-export const TertiaryOutlined: Story = {
-	args: { label: 'Button tertiary outlined', color: 'tertiary', variant: 'outlined', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="outlined">Button</v-btn>` } } },
-}
-export const TertiaryTonal: Story = {
-	args: { label: 'Button tertiary tonal', color: 'tertiary', variant: 'tonal', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="tonal">Button</v-btn>` } } },
-}
-export const TertiaryText: Story = {
-	args: { label: 'Button tertiary text', color: 'tertiary', variant: 'text', disabled: false },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="text">Button</v-btn>` } } },
-}
-export const TertiaryElevatedDisabled: Story = {
-	args: { label: 'Button tertiary elevated disabled', color: 'tertiary', variant: 'elevated', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="elevated" disabled>Button</v-btn>` } } },
-}
-export const TertiaryOutlinedDisabled: Story = {
-	args: { label: 'Button tertiary outlined disabled', color: 'tertiary', variant: 'outlined', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="outlined" disabled>Button</v-btn>` } } },
+export const Tertiary: Story = {
+	args: { label: 'Button tertiary', color: 'primary', variant: 'text', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text">Button</v-btn>` } } },
 }
-export const TertiaryTonalDisabled: Story = {
-	args: { label: 'Button tertiary tonal disabled', color: 'tertiary', variant: 'tonal', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="tonal" disabled>Button</v-btn>` } } },
+export const TertiaryLoading: Story = {
+	args: { label: 'Button tertiary loading', color: 'primary', variant: 'text', disabled: false, loading: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text" loading>Button</v-btn>` } } },
 }
-export const TertiaryTextDisabled: Story = {
-	args: { label: 'Button tertiary text disabled', color: 'tertiary', variant: 'text', disabled: true },
-	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="text" disabled>Button</v-btn>` } } },
+export const TertiaryDisabled: Story = {
+	args: { label: 'Button tertiary disabled', color: 'primary', variant: 'text', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text" disabled>Button</v-btn>` } } },
 }