feat(vue): footer actions slot

xamu-co · Dec 1, 2024 · d6a448f · d6a448f
1 parent 02e34c6
commit d6a448f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 35 deletions.
diff --git a/packages/components-vue/src/components/dropdown/Simple.vue b/packages/components-vue/src/components/dropdown/Simple.vue
@@ -9,12 +9,42 @@
 			<slot name="toggle" v-bind="{ model, setModel }"></slot>
 		</div>
 		<Modal
-			v-slot="{ modalRef }"
 			v-model="localModel"
 			v-bind="{ ...modalProps, theme, invertTheme, disabled: !isModal }"
 		>
-			<div ref="dropdownRef" :class="dropdownClasses">
+			<template #default="{ modalRef }">
+				<div
+					ref="dropdownRef"
+					:class="dropdownClasses"
+					class="flx --flxColumn --flx-start-stretch"
+				>
+					<slot
+						v-bind="{
+							model,
+							isModal,
+							setModel,
+							modalRef,
+							dropdownRef,
+							invertedTheme: invertedThemeValues,
+						}"
+					></slot>
+					<slot
+						v-if="!isModal"
+						name="actions"
+						v-bind="{
+							model,
+							isModal,
+							setModel,
+							modalRef,
+							dropdownRef,
+							invertedTheme: invertedThemeValues,
+						}"
+					></slot>
+				</div>
+			</template>
+			<template v-if="isModal" #footer-actions="{ modalRef }">
 				<slot
+					name="actions"
 					v-bind="{
 						model,
 						isModal,
@@ -24,7 +54,7 @@
 						invertedTheme: invertedThemeValues,
 					}"
 				></slot>
-			</div>
+			</template>
 		</Modal>
 	</BaseWrapper>
 </template>

diff --git a/packages/components-vue/src/components/modal/Simple.vue b/packages/components-vue/src/components/modal/Simple.vue
@@ -40,7 +40,7 @@
 							<ActionLink
 								:theme="invertedThemeValues"
 								:aria-label="cancelButtonOptions.title"
-								@click.stop="closeModal()"
+								@click.stop="() => closeModal()"
 							>
 								<IconFa name="xmark" :size="20" />
 							</ActionLink>
@@ -83,16 +83,27 @@
 								class="flx --flxRow --flx-between-center --width-100 modal-content"
 							>
 								<div class="flx --flxRow --flx-start-center">
-									<ActionButton
-										v-if="saveButtonOptions.visible"
-										:theme="invertedThemeValues"
-										:aria-label="saveButtonOptions.title"
-										:class="saveButtonOptions.btnClass"
-										:disabled="saveButtonOptions.disabled"
-										@click="emit('save', closeModal, $event)"
+									<slot
+										name="footer-actions"
+										v-bind="{
+											toggleModal,
+											model,
+											modalRef,
+											invertedTheme: invertedThemeValues,
+											save: (e: Event) => emit('save', closeModal, e),
+										}"
 									>
-										{{ saveButtonOptions.title }}
-									</ActionButton>
+										<ActionButton
+											v-if="saveButtonOptions.visible"
+											:theme="invertedThemeValues"
+											:aria-label="saveButtonOptions.title"
+											:class="saveButtonOptions.btnClass"
+											:disabled="saveButtonOptions.disabled"
+											@click="(e) => emit('save', closeModal, e)"
+										>
+											{{ saveButtonOptions.title }}
+										</ActionButton>
+									</slot>
 								</div>
 								<ActionButtonToggle
 									v-if="cancelButtonOptions.visible"
@@ -101,7 +112,7 @@
 									:class="cancelButtonOptions.btnClass"
 									data-dismiss="modal"
 									round=":sm-inv"
-									@click.stop="closeModal()"
+									@click.stop="() => closeModal()"
 								>
 									<IconFa name="xmark" hidden="-full:sm" />
 									<IconFa name="xmark" regular hidden="-full:sm" />
@@ -129,7 +140,7 @@
 							<ActionButton
 								:theme="invertedThemeValues"
 								:aria-label="t('close')"
-								@click="closeModal()"
+								@click="() => closeModal()"
 							>
 								{{ t("close") }}
 							</ActionButton>
@@ -178,10 +189,11 @@
 	import { useHelpers } from "../../composables/utils";
 
 	/**
+	 * Modal
+	 *
 	 * Based on @innologica/vue-stackable-modal
 	 * Modified to support vue3
 	 * It now uses dialog
-	 *
 	 * @see https://github.com/Innologica/vue-stackable-modal
 	 */
 

diff --git a/packages/styles/src/base/_initialize.scss b/packages/styles/src/base/_initialize.scss
@@ -76,21 +76,19 @@
 			}
 		}
 
-		* > {
-			a,
-			b,
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6,
-			th,
-			button,
-			strong {
-				// @defaults txtWeight
-				font-weight: utils.weight(bold);
-			}
+		a,
+		b,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		th,
+		button,
+		strong {
+			// @defaults txtWeight
+			font-weight: utils.weight(bold);
 		}
 
 		h1,

diff --git a/packages/styles/src/utils/_variables.scss b/packages/styles/src/utils/_variables.scss
@@ -70,10 +70,10 @@ $color-light: #fff !default;
 $color-dark: #000 !default;
 
 // COLORS, utils
-$color-bg: rgb(var(--rgb-light) 1) !default;
-$color-text: rgb(var(--rgb-secondary-complement) 1) !default; // used over bg
-$color-select-bg: rgb(var(--rgb-secondary) 1) !default;
-$color-select-txt: rgb(var(--rgb-light) 1) !default;
+$color-bg: rgb(var(--rgb-light)) !default;
+$color-text: rgb(var(--rgb-secondary-complement)) !default; // used over bg
+$color-select-bg: rgb(var(--rgb-secondary)) !default;
+$color-select-txt: rgb(var(--rgb-light)) !default;
 
 // MEDIA QUERIES
 $querie-smartwatch: 358px !default; // xs