fix: extend alert support on action

Author: vis97c

packages/components-vue/src/components/action/Button.stories.ts

@@ -1,17 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 
-import Button from "./Button.vue";
+import ButtonComponent from "./Button.vue";
+import { eColors } from "@open-xamu-co/ui-common-enums";
 
 const meta = {
 	title: "Action/Action Button",
-	component: Button as Record<keyof typeof Button, unknown>,
+	component: ButtonComponent as Record<keyof typeof ButtonComponent, unknown>,
 	args: { default: "Action Button" },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof ButtonComponent>;
 
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof ButtonComponent>;
 
-export const Sample: Story = {
+export const Button: Story = {
 	args: { default: "Action Button" },
 };
 
+export const ButtonIsActiveWithAlert: Story = {
+	args: { default: "Button with alert", active: true, alert: true },
+};
+
+export const ButtonAsY: Story = {
+	args: { default: "⋮", y: true, theme: eColors.DANGER },
+};
+
+export const ButtonAsYIsActiveWithAlert: Story = {
+	args: { default: "⋮", y: true, theme: eColors.DANGER, active: true, alert: true },
+};
+
 export default meta;

packages/components-vue/src/components/action/Button.vue

@@ -1,14 +1,15 @@
 <template>
 	<BaseAction
 		v-bind="{ ...$attrs, ...props, ...tooltipAttributes }"
-		:class="[modifiersClasses, stateClasses, themeClasses]"
-		class="bttn"
+		:class="[modifiersClasses, stateClasses, themeClasses, buttonTypeClass]"
 	>
 		<slot></slot>
 	</BaseAction>
 </template>
 
 <script setup lang="ts">
+	import { computed } from "vue";
+
 	import BaseAction from "../base/Action.vue";
 
 	import type {
@@ -27,7 +28,12 @@
 			iUseModifiersProps,
 			iUseStateProps,
 			iUseThemeProps,
-			iUseThemeTooltipProps {}
+			iUseThemeTooltipProps {
+		/**
+		 * Use vertical button
+		 */
+		y?: boolean;
+	}
 
 	/**
 	 * Action Button Component
@@ -44,4 +50,8 @@
 	const { modifiersClasses } = useModifiers(props);
 	const { stateClasses } = useState(props);
 	const { themeClasses, tooltipAttributes } = useTheme(props, true);
+
+	const buttonTypeClass = computed(() => {
+		return props.y ? "bttnY" : "bttn";
+	});
 </script>

packages/components-vue/src/components/form/Simple.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 
-import Simple from "./Simple.vue";
+import SimpleComponent from "./Simple.vue";
 import { FormInput } from "@open-xamu-co/ui-common-helpers";
 import { eFormType } from "@open-xamu-co/ui-common-enums";
 
@@ -55,17 +55,17 @@ const inputs: FormInput[] = [
 
 const meta = {
 	title: "Form/Form Simple",
-	component: Simple as Record<keyof typeof Simple, unknown>,
+	component: SimpleComponent as Record<keyof typeof SimpleComponent, unknown>,
 	args: { modelValue: inputs },
-} satisfies Meta<typeof Simple>;
+} satisfies Meta<typeof SimpleComponent>;
 
-type Story = StoryObj<typeof Simple>;
+type Story = StoryObj<typeof SimpleComponent>;
 
-export const Sample: Story = {
+export const Form: Story = {
 	args: { modelValue: inputs },
 };
 
-export const WithLocation: Story = {
+export const FormUsingLocationField: Story = {
 	args: {
 		modelValue: [
 			new FormInput({
@@ -78,7 +78,7 @@ export const WithLocation: Story = {
 	},
 };
 
-export const WithPhone: Story = {
+export const FormUsingPhoneField: Story = {
 	args: {
 		modelValue: [
 			new FormInput({

packages/components-vue/src/components/form/Stages.stories.ts

@@ -4,9 +4,9 @@ import { type iForm, FormInput, useForm } from "@open-xamu-co/ui-common-helpers"
 import { eFormType } from "@open-xamu-co/ui-common-enums";
 import type { iInvalidInput } from "@open-xamu-co/ui-common-types";
 
-import Stages from "./Stages.vue";
+import StagesComponent from "./Stages.vue";
 
-export const stages: iForm[][] = [
+export const stagesData: iForm[][] = [
 	[
 		{
 			title: "Offer field",
@@ -97,17 +97,18 @@ async function submitFn(inputs: FormInput[]): Promise<boolean | iInvalidInput[]>
 
 const meta = {
 	title: "Form/Form Stages",
-	component: Stages,
-	args: { stages, submitFn },
-} satisfies Meta<typeof Stages>;
+	component: StagesComponent,
+	args: { stages: stagesData, submitFn },
+	excludeStories: /.*Data$/,
+} satisfies Meta<typeof StagesComponent>;
 
-type Story = StoryObj<typeof Stages>;
+type Story = StoryObj<typeof StagesComponent>;
 
-export const Sample: Story = {
-	args: { stages, submitFn },
+export const Stages: Story = {
+	args: { stages: stagesData, submitFn },
 };
 
-export const WithInvalidStage: Story = {
+export const StagesWithInvalidStage: Story = {
 	args: {
 		stages: [
 			[

packages/components-vue/src/composables/state.ts

@@ -15,10 +15,17 @@ export default function useState(props: iUseStateProps) {
 
 	const stateClasses = computed<string[]>(() => {
 		const values: Record<string, boolean>[] = [
-			{ ...props.state, active: !!props.active, invalid: !!props.invalid },
+			{
+				...props.state,
+				active: !!props.active,
+				alert: !!props.alert,
+				invalid: !!props.invalid,
+			},
 		];
 
-		return props.state || props.active || props.invalid ? GMC(values, { prefix: "is" }) : [];
+		const hasState = !!(props.state || props.active || props.alert || props.invalid);
+
+		return hasState ? GMC(values, { prefix: "is" }) : [];
 	});
 
 	return { stateClasses };

packages/components-vue/src/screens/ModalWithFormStages.vue

@@ -52,7 +52,7 @@
 	import FormStages from "../components/form/Stages.vue";
 	import Modal from "../components/modal/Simple.vue";
 
-	import { stages as formStages } from "../components/form/Stages.stories";
+	import { stagesData } from "../components/form/Stages.stories";
 
 	/**
 	 * Modal with form stages
@@ -61,7 +61,7 @@
 	 */
 
 	const stages = computed<iForm[][]>(() => {
-		return formStages;
+		return stagesData;
 	});
 
 	function updateUiComponentId({ uiComponent }: Record<string, any[]>) {

packages/components-vue/src/types/props.ts

@@ -17,6 +17,14 @@ export interface iUseModifiersProps {
 }
 
 export interface iUseStateProps {
+	/**
+	 * Alert state: Mostly useful on actions
+	 * Included here to make his usage less verbose
+	 *
+	 * @state
+	 * @example is--alert
+	 */
+	alert?: boolean;
 	/**
 	 * Active state: Mostly useful on actions
 	 * Included here to make his usage less verbose

packages/styles/src/components/action/_box.scss

@@ -11,13 +11,18 @@
 @mixin box {
 	@layer definitions {
 		.#{module.$component-box} {
+			@include module.action-alert-styles;
 			@include module.action-disabled-styles;
 
 			// width: 100%;
 			box-sizing: border-box;
 			border: 2px solid transparent;
 			overflow: visible;
 
+			&.#{module.$status-is-alert}:after {
+				background-color: var(--bg, transparent);
+			}
+
 			@layer defaults {
 				&:not(
 						.#{module.$prefix-default}--button,

packages/styles/src/components/action/_button.scss

@@ -13,11 +13,18 @@
 			@include module.action-round-styles;
 			@include module.action-aligment-styles;
 			@include module.action-gaping-styles;
+			@include module.action-alert-styles;
 			@include module.action-theme-union-styles;
 			@include module.action-size-styles;
 			@include module.action-border-styles;
 			@include module.action-capitalize-styles;
 			@include module.action-disabled-styles(false);
+
+			&.#{module.$status-is-alert}:after {
+				--bc: var(--bg);
+
+				background-color: var(--bg-a, #{module.$color-bg});
+			}
 		}
 
 		:not([class*="#{module.$status-toggle}"])

packages/styles/src/components/action/_buttonY.scss

@@ -9,6 +9,13 @@
 		.#{module.$component-button-y} {
 			@include module.action-styles;
 			@include module.action-aligment-styles;
+			@include module.action-alert-styles;
+
+			&.#{module.$status-is-alert}:after {
+				--bc: var(--bg);
+
+				background-color: var(--bg-a, #{module.$color-bg});
+			}
 
 			@include module.action-size-styles(false) using($size) {
 				padding: #{$size * 0.8} #{$size * 0.2};